<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";
include "../DBManager.php";

// -----------------------------------------------------------------------------
// 访问设置
// -----------------------------------------------------------------------------

if (!isset($_GET["id"])) {
    exit("需要传入有效的参数！");
}
$id = $_GET["id"];

// -----------------------------------------------------------------------------
// 数据库相关设置
// -----------------------------------------------------------------------------

$dbPath = "../" . $dbPath; // 不加这行语句的话会报错，提示找不到对应路径
$db = new DBManager("sqlite:" . $dbPath);

// -----------------------------------------------------------------------------
// 时区日期设置
// -----------------------------------------------------------------------------

date_default_timezone_set($region);
$today = date("Y-m-d", time());

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>编辑目标</title>
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!-- div container start -->
<div class="container container-fluid mt-3 mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item"><a class="text-decoration-none" href="index.php">目标管理</a></li>
                <li class="breadcrumb-item active">编辑目标</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <?php

    // -------------------------------------------------------------------------

    if (!$db->goalExist($id)) {
        exit("读取数据失败，该 id 对应的目标不存在。");
    }

    // -------------------------------------------------------------------------

    $goalInfor = $db->getGoalInfor($id);

    // $sortNumber = $goalInfor["sortNumber"];
    // $createTime = $goalInfor["createTime"];
    $description = $goalInfor["description"];
    $actionPlan = $goalInfor["actionPlan"];
    $motivation = $goalInfor["motivation"];
    $status = $goalInfor["status"];
    $remark = $goalInfor["remark"];
    $startDate = $goalInfor["startDate"];
    $endDate = $goalInfor["endDate"];

    $achieveDate = $goalInfor["achieveDate"];
    $giveupDate = $goalInfor["giveupDate"];
    $giveupReason = $goalInfor["giveupReason"];

    // -------------------------------------------------------------------------

    ?>

    <form id="myForm" action="editFormAction.php" method="post">

        <!-- 表单主体部分 开始 -->
        <div class="mt-3">

            <!-- 隐藏的输入框，存储了当前目标的id，后续向数据库写入数据时要用到这个 id. -->
            <input id="inputGoalId" 
                    name = "id"
                    value = "<?php echo $id; ?>"
                    type="text" 
                    hidden>

            <!-- 目标描述 -->
            <div class="mt-3">
                <label for="inputGoalDescription" class="form-label text-danger">目标描述*</label>
                <textarea
                        id="inputGoalDescription"
                        name="description"
                        class="form-control"
                        placeholder="目标应尽量明确，具体，可衡量。"
                        required
                        rows="5"><?php echo $description; ?></textarea>
            </div>

            <!-- 开始日期 -->
            <div class="mt-3">
                <label for="inputGoalStartDate" class="form-label text-danger">开始日期*</label>
                <input 
                        id="inputGoalStartDate" 
                        name="startDate"
                        type="date" 
                        value="<?php echo $startDate; ?>"
                        required
                        class="form-control">
            </div>

            <!-- 结束日期 -->
            <div class="mt-3">
                <label for="inputGoalEndDate" class="form-label text-danger">结束日期*</label>
                <input 
                        id="inputGoalEndDate" 
                        name="endDate"
                        type="date" 
                        value="<?php echo $endDate; ?>"
                        required
                        class="form-control">
            </div>

            <!-- 持续时间 -->
            <ul class="list-group mt-3">
                <label for="" class="form-label">历时天数</label>
                <li id="goalLifeDays" class="list-group-item rounded">1天</li>
            </ul>

            <!-- 奋斗动力 -->
            <div class="mt-3">
                <label for="inputMotivation" class="form-label">奋斗动力</label>
                <textarea
                        id="inputMotivation"
                        name="motivation"
                        class="form-control"
                        placeholder="为什么实现这个目标很重要？"
                        rows="5"><?php echo $motivation; ?></textarea>
            </div>

            <!-- 行动计划 -->
            <div class="mt-3">
                <label for="inputActionPlan" class="form-label">行动计划</label>
                <textarea
                        id="inputActionPlan"
                        name="actionPlan"
                        class="form-control"
                        placeholder="每天、每周、每月应该做些什么？"
                        rows="5"><?php echo $actionPlan; ?></textarea>
            </div>

            <!-- 备注信息 -->
            <div class="mt-3">
                <label for="inputRemark" class="form-label">备注信息</label>
                <textarea
                        id="inputRemark"
                        name="remark"
                        class="form-control"
                        placeholder="如当前进度。"
                        rows="5"><?php echo $remark; ?></textarea>
            </div>

            <!-- 目标状态 -->
            <!-- 状态更改为「已完成」时，显示完成日期输入框。更改为其他状态时，隐藏相应的输入框，并清空其中的数据。 -->
            <!-- 状态更改为「已放弃」时，显示放弃日期输入框和放弃原因输入框。更改为其他状态时，隐藏相应的输入框，并清空其中的数据。 -->
            <div class="mt-3">
                <label for="selectGoalStatus" class="form-label text-danger">目标状态*</label>
                <select 
                        id="selectGoalStatus" 
                        name="status" 
                        required
                        class="form-select">
                    <option value="ongoing" selected>进行中</option>
                    <option value="waiting">未进行</option>
                    <option value="achieved">已完成</option>
                    <option value="abandoned">已放弃</option>
                </select>
            </div>

            <!-- ----------------------------------------------------------- -->

            <!-- 完成日期。默认隐藏，状态更改为已完成时显示，更改为其他状态时隐藏，并清空其中的数据。 -->
            <div id="divInputGoalAchieveDate" class="mt-3" style="display: none;">
                <label for="inputGoalAchieveDate" class="form-label text-danger">完成日期*</label>
                <input 
                        id="inputGoalAchieveDate" 
                        name="achieveDate"
                        type="date" 
                        class="form-control">
            </div>

            <!-- 放弃日期。默认隐藏，状态更改为已放弃时显示，更改为其他状态时隐藏，并清空其中的数据。 -->
            <div id="divInputGoalGiveupDate" class="mt-3" style="display: none;">
                <label for="inputGoalGiveupDate" class="form-label text-danger">放弃日期*</label>
                <input 
                        id="inputGoalGiveupDate" 
                        name="giveupDate"
                        type="date" 
                        class="form-control">
            </div>

            <!-- 放弃原因。默认隐藏，状态更改为已放弃时显示，更改为其他状态时隐藏，并清空其中的数据。 -->
            <div id="divInputGoalGiveupReason" class="mt-3" style="display: none;">
                <label for="inputGoalGiveupReason" class="form-label">放弃原因</label>
                <textarea
                        id="inputGoalGiveupReason"
                        name="giveupReason"
                        class="form-control"
                        placeholder="放弃这个目标的原因是什么？"
                        rows="5"><?php echo $giveupReason; ?></textarea>
            </div>


            <!-- ----------------------------------------------------------- -->

        </div>
        <!-- 表单主体部分 结束 -->

        <!-- 表单按钮部分 开始 -->
        <div class="mt-3 mb-3">
            <button id="btnSubmit" type="submit" class="btn btn-outline-primary">修改</button>
            <button id="btnReset" type="reset" class="btn btn-outline-secondary">重置</button>
        </div>
        <!-- 表单按钮部分 结束 -->

    </form>


</div>
<!-- div container end -->

<!-- ----------------------------------------------------------------------- -->

<!-- 消息弹窗 开始 -->
<div aria-live="polite" aria-atomic="true" class="position-relative">
    <div class="toast-container position-fixed top-0 start-50 translate-middle-x">

        <div id="toastOne" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div id="toastHeader" class="toast-header bg-info">
                <strong class="me-auto">提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body bg-white">
                <p id="msgContent">需要显示的信息。</p>
            </div>
        </div>

    </div>
</div>
<!-- 消息弹窗 结束 -->

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/jQuery/jquery-3.5.1.js"></script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 网页初次加载时执行
    $(document).ready(function() {

        // ---------------------------------------------------------------------
        // 根据数据库中存储的该目标的状态，初始化状态选择框
        // ---------------------------------------------------------------------

        <?php
            if (!empty($status)) {
                echo <<<BBB
                    $("#selectGoalStatus").val("$status");
                BBB;
            } else {
                // 如果出了什么意外，数据库中相应字段的值为空，就将其状态统一设置为 waiting
                echo <<<BBB
                    $("#selectGoalStatus").val("waiting");
                BBB;
            }
        ?>

        // ---------------------------------------------------------------------
        // 检测目标状态，显示或隐藏相应的输入框
        // ---------------------------------------------------------------------

        var selectedStatus = $("#selectGoalStatus").val();
        switch(selectedStatus) {
            case "achieved":
                $("#divInputGoalAchieveDate").show();
                $("#inputGoalAchieveDate").attr("required", true)
                break;
            case "abandoned":
                $("#divInputGoalGiveupDate").show();
                $("#inputGoalGiveupDate").attr("required", true);

                $("#divInputGoalGiveupReason").show();
                // 放弃原因，并不是非填不可吧。
                // $("#inputGoalGiveupReason").attr("required", true);
                break;
            default:
        }

        // ---------------------------------------------------------------------
        // 网页加载时给「实现日期」与「放弃日期」输入框赋初始值。
        // ---------------------------------------------------------------------
        // 检测数据库中是否存在实现日期或放弃日期，如果不存在，则将其初始化为今日日期

        <?php

            // 赋初始值 to 放弃日期输入框
            if (!empty($giveupDate)) {
                echo <<<BBB
                    $("#inputGoalGiveupDate").val("$giveupDate");
                BBB;
            } else {
                echo <<<BBB
                    $("#inputGoalGiveupDate").val("$today");
                BBB;
            }

            // 赋初始值 to 实现日期输入框
            if (!empty($achieveDate)) {
                echo <<<BBB
                    $("#inputGoalAchieveDate").val("$achieveDate");
                BBB;
            } else {
                echo <<<BBB
                    $("#inputGoalAchieveDate").val("$today");
                BBB;
            }

        ?>

        // ---------------------------------------------------------------------
        // 网页加载时，自动触发开始日期输入框的 change 事件，以此初始化「历时天数」下方的信息。
        // ---------------------------------------------------------------------
        $("#inputGoalStartDate").change();


    })
</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 选择目标状态后，根据选择的状态，显示或隐藏相应的输入框
    $("#selectGoalStatus").on("change", function() {

        var selectedStatus = $("#selectGoalStatus").val();

        if (selectedStatus == "achieved") {
            $("#divInputGoalAchieveDate").show();
            $("#inputGoalAchieveDate").attr("required", true);
            // 还是别自动聚焦了，体验不好
            // $("#inputGoalAchieveDate").focus();
        } else {
            // 这里暂时不清空数据，等表单提交时再判断一次 status，那时再清空数据
            $("#divInputGoalAchieveDate").hide();
            $("#inputGoalAchieveDate").removeAttr("required");
        }

        if (selectedStatus == "abandoned") {
            $("#divInputGoalGiveupDate").show();
            $("#inputGoalGiveupDate").attr("required", true);
            // $("#inputGoalGiveupDate").focus();

            $("#divInputGoalGiveupReason").show();
            // 放弃原因，不是非填不可。
            // $("#inputGoalGiveupReason").attr("required", true);
        } else {
            // 这里暂时不清空数据，等表单提交时再判断一次 status，那时再清空数据
            $("#divInputGoalGiveupDate").hide();
            $("#inputGoalGiveupDate").removeAttr("required");

            $("#divInputGoalGiveupReason").hide();
            // $("#inputGoalGiveupReason").removeAttr("required");
        }

    })
</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    // 提交表单前，检测 status 的值，清空相应的输入框的值

    $("form").on("submit", function(event) {

        event.preventDefault();

        // ---------------------------------------------------------------------

        var selectedStatus = $("#selectGoalStatus").val();

        var startDateString = $("#inputGoalStartDate").val();
        var endDateString = $("#inputGoalEndDate").val();
        var achieveDateString = $("#inputGoalAchieveDate").val();
        var giveupDateString = $("#inputGoalGiveupDate").val();

        // ---------------------------------------------------------------------

        // 判断输入的开始日期和结束日期，是否为有效的日期

        // 这段代码没必要自己写，浏览器会自己判断
        // if ( Number.isNaN(Date.parse(startDateString)) ) {
        //     // 不是有效的日期

        //     alert("请输入有效的开始日期")
        //     return 0;

        // } else if  ( Number.isNaN(Date.parse(endDateString)) ) {
        //     // 不是有效的日期

        //     alert("请输入有效的结束日期")
        //     return 0;

        // }

        // 判断结束日期是否不早于开始日期

        if (differenceBetweenDays(startDateString, endDateString) == 0) {
            alert("出错啦！「结束日期」不应该早于「开始日期」。");
            return 0;
        }

        switch (selectedStatus) {

            case "achieved":

                if (differenceBetweenDays(startDateString, achieveDateString) == 0) {
                    alert("出错啦!「完成日期」不应该早于「开始日期」。");
                    return 0;
                }
                break;

            case "abandoned":

                if (differenceBetweenDays(startDateString, giveupDateString) == 0) {
                    alert("出错啦！「放弃日期」不应该早于「开始日期」。");
                    return 0;
                }

        }

        // ---------------------------------------------------------------------

        // 如果提交表单的时候，目标状态不是「已完成」，则清空「完成日期」输入框中的值。
        if (selectedStatus !== "achieved") {
            $("#inputGoalAchieveDate").val("");
        }

        // 如果提交表单的时候，目标状态不是「已放弃」，则清空「放弃日期」与「放弃原因」输入框中的值。
        if (selectedStatus !== "abandoned") {
            $("#inputGoalGiveupDate").val("");
            $("#inputGoalGiveupReason").val("");
        }

        // -----------------------------------------------------------------

        $.ajax({
            method: "POST",
            url: "editFormAction.php",
            async: true,
            data: $("#myForm").serialize()
        })
        .done(function( msg ) {
            $("#msgContent").text(msg)
            $("#toastHeader").attr("class", "toast-header bg-info")
            const toast = new bootstrap.Toast(toastOne, {"delay": 1000})
            toast.show()
        })
        .fail(function( jqXHR, textStatus ) {
            alert( "修改失败：" + textStatus );
        });

        // ---------------------------------------------------------------------

    })

</script>
   
<!-- ----------------------------------------------------------------------- -->

<script>

    // 计算两个日期之间的间隔天数
    function differenceBetweenDays(startDateString, endDateString) {

            var startDate = Date.parse(startDateString);
            var endDate = Date.parse(endDateString);

            if (endDate < startDate) {
                return 0
            }

            if (endDate == startDate) {
                return 1
            }

            if (endDate > startDate) {
                // 目标当天开始当天结束，也算历时1天，所以末尾要加1。
                return ((endDate - startDate) / (1*24*60*60*1000)) + 1
            }

    }

    // 根据传入的开始日期与结束日期，修改「历时天数」下方显示的信息
    function changeGoalLifeDays(startDateString, endDateString) {

            var msg = "";

            if (differenceBetweenDays(startDateString, endDateString) == 0) {
                msg = "<span class='text-danger'>出错啦，「结束日期」不应早于「开始日期」。</span>";
            }

            if (differenceBetweenDays(startDateString, endDateString) == 1) {
                msg = "1天";
            }

            if (differenceBetweenDays(startDateString, endDateString) > 1) {
                msg = differenceBetweenDays(startDateString, endDateString) + "天";
            }

            $("#goalLifeDays").html(msg)

    }

    // 输入目标的开始日期与结束日期后，显示间隔天数
    $("#inputGoalStartDate, #inputGoalEndDate").on("change", function() {

        if ( $("#inputGoalStartDate").val() !== "" && $("#inputGoalEndDate").val() !== "" ) {

            var startDateString = $("#inputGoalStartDate").val();
            var endDateString = $("#inputGoalEndDate").val();

            changeGoalLifeDays(startDateString, endDateString)

        } else {
            var msg = "<span class='text-danger'>待输入有效的日期。</span>";
            $("#goalLifeDays").html(msg);
        }

    })

    $("#inputGoalAchieveDate").on("change", function() {

        var startDateString = $("#inputGoalStartDate").val();
        var achieveDateString = $("#inputGoalAchieveDate").val();

        if (differenceBetweenDays(startDateString, achieveDateString) == 0) {
            alert("出错啦！「目标完成日期」不应该早于「目标开始日期」。")
        }

    })

    $("#inputGoalGiveupDate").on("change", function() {

        var startDateString = $("#inputGoalStartDate").val();
        var giveupDateString = $("#inputGoalGiveupDate").val();

        if (differenceBetweenDays(startDateString, giveupDateString) == 0) {
            alert("出错啦！「目标放弃日期」不应该早于「目标开始日期」。")
        }

    })

</script>

<!-- ----------------------------------------------------------------------- -->

<script>

    var formEdited = false;

    // 监听用户是进行了输入操作
    $(".form-control").keydown(function () {
        formEdited = true;
    });

    // 页面刷新或关闭前弹窗警告
    $(window).on('beforeunload', function(){
        if (formEdited == true) {
            return "Are you sure you want to leave?";
        }
    });

    // 点击按钮提交表单刷新页面时不弹窗警告
    $('#btnSubmit').on("click", function () {
        $(window).off('beforeunload');
    });

</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 按下 ctrl + s 时保存。
    // 参考资料：https://stackoverflow.com/questions/93695/best-cross-browser-method-to-capture-ctrls-with-jquery
    $(window).bind('keydown', function(event) {
        if (event.ctrlKey || event.metaKey) {
            switch ((event.key).toLowerCase()) {
                case 's':
                    event.preventDefault();
                    $("#btnSubmit").click();
            }
        }
    });
</script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
